<!-- 发布需求 -->
<template>
  <client-only>
    <el-dialog
      v-model="visible"
      width="720px"
      :z-index="1000"
      draggable
      :show-close="false"
      @close="resetForm"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="use-dialog-header">
          <div :id="titleId" :class="titleClass">{{ title }}</div>
          <div class="close">
            <el-icon @click="close">
              <CloseBold />
            </el-icon>
          </div>
        </div>
      </template>
      <div class="main">
        <el-form
          ref="formRef"
          class="form"
          label-width="110px"
          :model="formData"
          :rules="rules"
        >
          <el-form-item label="服务类型：" prop="serviceCategoryCodes">
            <client-only>
              <el-checkbox-group v-model="formData.serviceCategoryCodes">
                <el-checkbox
                  v-for="(item, index) in categoryList"
                  :key="index"
                  :label="item.categoryName"
                  :value="item.categoryCode"
                />
              </el-checkbox-group>
            </client-only>
          </el-form-item>
          <el-form-item label="目的城市：" prop="cityCodes">
            <client-only>
              <el-select
                v-model="formData.cityCodes"
                multiple
                placeholder="请选择目的城市"
                clearable
              >
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :value="item.code"
                  :label="item.nameCn"
                ></el-option>
              </el-select>
            </client-only>
          </el-form-item>
          <el-form-item label="标题：" prop="title">
            <el-input
              v-model="formData.title"
              placeholder="请输入标题"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="详细描述：" prop="detailDesc">
            <el-input
              v-model="formData.detailDesc"
              placeholder="请输详细描述"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              maxlength="300"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="截止时间：" prop="cutoffDate">
            <client-only>
              <el-date-picker
                v-model="formData.cutoffDate"
                type="date"
                :disabled-date="disabledDate"
                placeholder="请选择截止时间"
                value-format="YYYY-MM-DD"
              />
            </client-only>
          </el-form-item>
          <el-form-item label="联系客服：" prop="contactService">
            <client-only>
              <el-radio-group
                v-model="formData.contactService"
                class="radioGroup"
              >
                <el-radio
                  v-for="(item, index) in contactService"
                  :key="index"
                  :value="item.value"
                  border
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </client-only>
          </el-form-item>
          <el-form-item label="联系人电话：" prop="contactPhone">
            <el-input
              v-model="formData.contactPhone"
              placeholder="请输入联系人电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人邮箱：" prop="contactEmail">
            <el-input
              v-model="formData.contactEmail"
              placeholder="请输入联系人邮箱"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="btns">
          <div>
            <el-button round type="primary" @click="onSubmit"
              >提交需求</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </client-only>
</template>

<script setup>
// 获取用户信息
import { storeToRefs } from "pinia";
const user = useStore.user();
const global = useStore.global();
const { userInfo } = storeToRefs(user);
const { categoryList, cityList } = storeToRefs(global);

const emit = defineEmits(["update"]);

const visible = ref(false);
const title = ref("发布需求");

const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7; // 8.64e7 毫秒数代表一天
};

const show = (t = "发布需求", row) => {
  visible.value = !visible.value;
  title.value = t;
  if (row?.id) {
    getDetail(row.id);
  }
};



const formData = reactive({
  userId: userInfo.value.employeeId,
  contactService: "MY_PROVIDER",
});
const rules = {
  serviceCategoryCodes: [
    {
      required: true,
      type: "array",
      message: "请选择服务类型",
      trigger: "change",
    },
  ],
  cityCodes: [{ required: true, message: "请选择目的城市", trigger: "blur" }],
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  detailDesc: [{ required: true, message: "请输详细描述", trigger: "blur" }],
  cutoffDate: [{ required: true, message: "请选择截止时间", trigger: "blur" }],
  contactPhone: [
    { required: true, message: "请输入联系人电话", trigger: "blur" },
  ],
};

const getDetail = (id) => {
  api.get(`/demand/front/${id}`, { msg: true, loading: true }).then((res) => {
    formData.id = id
    formData.serviceCategoryCodes = res.serviceCategoryCodes.split(',')
    formData.cityCodes = res.cityCodes.split(',')
    formData.title = res.title
    formData.detailDesc = res.detailDesc
    formData.cutoffDate = res.cutoffDate
    formData.contactService = res.contactService
    formData.contactPhone = res.contactPhone
    formData.contactEmail = res.contactEmail
  });
};

const formRef = ref();
const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
        const url = formData.id?"/demand/update":"/demand/add"
        api.post(
          url,
          {
            ...formData,
            serviceCategoryCodes: formData.serviceCategoryCodes.join(","),
            cityCodes: formData.cityCodes.join(","),
            cutoffDate: formData.cutoffDate + " 23:59:59",
          },
          { msg: true, loading: true }
        )
        .then((res) => {
          resetForm();
        });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = () => {
  formRef.value.resetFields();
  visible.value = false;
};

defineExpose({ show });
</script>
<style lang="scss" scoped>
.main {
  margin: 0 90px;
}

.captcha {
  flex: 1;
  margin-right: 10px;
}

.toggle {
  .el-button--text {
    color: var(--use-color-warning);
    font-size: 16px;
  }
}

.btns {
  margin: 32px 0;

  .el-button {
    width: 100%;
    border-radius: 56px !important;
  }
}

.form {
  .label {
    display: inline-flex;
    align-items: center;

    .num {
      width: 18px;
      height: 18px;
      line-height: 18px;
      border-radius: 2px;
      background: var(--use-color-light-2);
      text-align: center;
      font-size: 12px;
      margin-right: 8px;
    }
  }
}

.send-code {
  height: 40px;
}

.tip {
  color: var(--use-color-danger);
}

::v-deep(.radioGroup) {
  .el-radio__input {
    display: none;
  }
  .el-radio {
    padding-right: 40px;
    margin-right: 12px !important;
  }
  .is-checked {
    border-color: #000;
    &::after {
      content: "";
      width: 24px;
      height: 24px;
      background: #000;
      clip-path: polygon(0 100%, 100% 0, 100% 100%);
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 0;
    }
    &::before {
      content: "✓";
      width: 13px;
      height: 20px;
      line-height: 24px;
      position: absolute;
      font-size: 12px;
      color: #fff;
      text-align: center;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }
}
</style>
